<template>
  <view class="loginContent">
    <view style="height: 120px"></view>
    <img
      src="https://z1.ax1x.com/2023/11/01/piuSBqK.png"
      alt="logo"
      style="width: 250px; height: 80px; padding-left: 75px"
    />
    <view style="height: 40px"></view>
    <!-- <view>
      <view>
        <text >欢迎登录</text>
    </view>  
      <view>
      
        <text >你好，</text>
    </view> -->

    <!-- </view> -->
    <view class="loginBody">
      <view class="loginItem">
        <nut-input placeholder="请输入账号" v-model="text" clearable>
        </nut-input>
      </view>
      <view class="loginItem">
        <nut-input
          placeholder="请输入密码"
          v-model="password"
          type="password"
          clearable
          :error-message="state.error2"
        />
      </view>
      <view class="loginButton">
        <nut-button block type="primary" @click="validatePassword"
          >登录</nut-button
        >
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import { reactive, onMounted, toRefs } from "vue";
import Taro from "@tarojs/taro";

export default {
  setup() {
    const state = reactive({
      text: "hanqingxu",
      password: "aabb;111",
      error2: "",
    });
    const { text,password } = toRefs(state)
    const validatePassword = async () => {
      try {
        const response = await new Promise((resolve, reject) => {
          Taro.request({
            url: "https://sunyukq.transpheretms.com:8078/api/Login",
            //url: ' http://218.2.231.120:2054/api/Login',
            method: "POST",
            data: {
              loginname: text.value,
              Password: password.value,
            },
            header: {
              "Content-Type": "application/json",
            },
            success: function (res) {
              resolve(res.data);
            },
            fail: function (error) {
              reject(error);
            },
          });
        });

        console.log("响应数据:", response.data); // 输出响应信息

        if (response && response.message === "登录成功") {
          Taro.showToast({
            title: "登陆成功",
            icon: "success",
            duration: 2000,
          });
          state.error2 = "";
          console.log("登录成功");
          Taro.setStorageSync("userData", response.data); // 存储登录状态
          Taro.setStorageSync("isLoggedIn", true); // 存储登录状态
          Taro.redirectTo({
            url: "/pages/attendance/index",
          });
 
        } else {
          Taro.showToast({
            title: "账号或密码错误",
            icon: "error",
            duration: 2000,
          });
          state.error2 = "账号或密码错误";
          console.log("账号或密码错误");
        }
      } catch (error) {
        console.error("登录请求失败:", error);
        state.error2 = "登录请求失败，请稍后再试";
      }
    };
    onMounted(() => {
      const isLoggedIn = Taro.getStorageSync("isLoggedIn");
      if (isLoggedIn) {
        Taro.redirectTo({
          url: "/pages/attendance/index",
        });
      }
    });
    return {
      state,
      validatePassword,
      text,
      password,
    };
  },
};
</script>
<style lang="scss">
.loginContent {
  height: 100%;
  width: 100%;
}

.loginBody {
  height: 60%;
  margin: 20px 60px;
  .loginButton {
    margin-top: 50px;
  }
  .loginItem {
    margin-top: 20px;
  }
}
.page {
  height: 100%;
}
</style>
